Text Utilities এবং Font Size কাস্টমাইজ করা

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি |

বুটস্ট্রাপ ৫ এ Text Utilities এবং Font Size কাস্টমাইজেশন এর মাধ্যমে আপনি সহজে টেক্সটের স্টাইল, সাইজ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। এই টুলসগুলো ব্যবহার করে আপনি ওয়েব পেজের টেক্সটের দেখাশোনা, অবস্থান এবং আকৃতি সহজেই কাস্টমাইজ করতে পারবেন।


Text Utilities

বুটস্ট্রাপ ৫ এ Text Utilities এর মাধ্যমে বিভিন্ন টেক্সট স্টাইল এবং বৈশিষ্ট্য দ্রুত কাস্টমাইজ করা যায়। এতে রয়েছে টেক্সটের রঙ, অ্যালাইনমেন্ট, ট্রান্সফর্মেশন, ওয়েট, এবং আরও অনেক কিছু। এই ক্লাসগুলোকে text-* ফরম্যাটে ব্যবহার করা হয়।

১. Text Alignment (টেক্সটের অবস্থান)

বুটস্ট্রাপ ৫ এ বিভিন্ন টেক্সট এলাইনমেন্টের জন্য কিছু ক্লাস প্রদান করা হয়েছে:

  • text-left: টেক্সট বামদিকে সজ্জিত করে।
  • text-center: টেক্সটকে কেন্দ্রে সজ্জিত করে।
  • text-right: টেক্সটকে ডানদিকে সজ্জিত করে।
<p class="text-left">এটি বাম দিকে সজ্জিত টেক্সট।</p>
<p class="text-center">এটি কেন্দ্রস্থলে সজ্জিত টেক্সট।</p>
<p class="text-right">এটি ডান দিকে সজ্জিত টেক্সট।</p>

২. Text Color (টেক্সটের রঙ)

বুটস্ট্রাপ ৫ এ বিভিন্ন টেক্সট রঙ ক্লাস রয়েছে, যা আপনার টেক্সটের রঙ পরিবর্তন করতে সাহায্য করবে:

  • text-primary: প্রাথমিক রঙ (নির্ধারিত ব্লু)
  • text-secondary: সেকেন্ডারি রঙ
  • text-success: সাকসেস রঙ (সবুজ)
  • text-danger: বিপদজনক রঙ (লাল)
  • text-warning: সতর্কতা রঙ (হলুদ)
  • text-info: তথ্য রঙ (নীল)
  • text-light: হালকা রঙ
  • text-dark: গা dark ় রঙ
<p class="text-primary">এটি প্রাথমিক রঙের টেক্সট।</p>
<p class="text-success">এটি সাকসেস রঙের টেক্সট।</p>
<p class="text-danger">এটি বিপদজনক রঙের টেক্সট।</p>

৩. Text Transform (টেক্সট ট্রান্সফর্ম)

Text Transform ক্লাস ব্যবহার করে আপনি টেক্সটের কেস পরিবর্তন করতে পারেন:

  • text-uppercase: টেক্সটকে বড় হাতের অক্ষরে পরিবর্তন করে।
  • text-lowercase: টেক্সটকে ছোট হাতের অক্ষরে পরিবর্তন করে।
  • text-capitalize: প্রথম অক্ষর বড় করে বাকিটা ছোট রাখে।
<p class="text-uppercase">এটি বড় হাতের অক্ষরে লেখা টেক্সট।</p>
<p class="text-lowercase">এটি ছোট হাতের অক্ষরে লেখা টেক্সট।</p>
<p class="text-capitalize">এটি ক্যাপিটালাইজড টেক্সট।</p>

৪. Text Decoration (টেক্সট ডেকোরেশন)

  • text-decoration-underline: টেক্সটের নিচে আন্ডারলাইন দেয়।
  • text-decoration-line-through: টেক্সটের উপর লাইন দেয় (স্ট্রাইকথ্রু)।
<p class="text-decoration-underline">এটি আন্ডারলাইন করা টেক্সট।</p>
<p class="text-decoration-line-through">এটি স্ট্রাইকথ্রু টেক্সট।</p>

Font Size কাস্টমাইজ করা

বুটস্ট্রাপ ৫ এ টেক্সটের font size কাস্টমাইজ করতে কিছু প্রি-ডিফাইনড ক্লাস রয়েছে। এছাড়াও, আপনি নিজের কাস্টম সিএসএস দিয়ে Font Size নির্ধারণ করতে পারেন।

১. Font Size Utilities

বুটস্ট্রাপ ৫ এ বিভিন্ন font size ক্লাস রয়েছে, যা আপনাকে টেক্সটের আকার কাস্টমাইজ করতে সাহায্য করে। এই ক্লাসগুলো fs-* ফরম্যাটে ব্যবহার করা হয়, যেখানে নম্বর আপনার পছন্দের ফন্ট সাইজ নির্দেশ করে (১ থেকে ৬ পর্যন্ত)।

  • fs-1: বড় ফন্ট সাইজ।
  • fs-2: মাঝারি বড় ফন্ট সাইজ।
  • fs-3: সাধারণ সাইজ।
  • fs-4: একটু ছোট ফন্ট সাইজ।
  • fs-5: আরও ছোট ফন্ট সাইজ।
  • fs-6: সবচেয়ে ছোট ফন্ট সাইজ।
<p class="fs-1">এটি সবচেয়ে বড় ফন্ট সাইজ।</p>
<p class="fs-2">এটি একটু ছোট ফন্ট সাইজ।</p>
<p class="fs-3">এটি সাধারণ ফন্ট সাইজ।</p>
<p class="fs-4">এটি আরও ছোট ফন্ট সাইজ।</p>
<p class="fs-5">এটি সবচেয়ে ছোট ফন্ট সাইজ।</p>

২. Font Size এর জন্য কাস্টম সিএসএস ব্যবহার

আপনি যদি আরও সুনির্দিষ্ট বা কাস্টম ফন্ট সাইজ চান, তাহলে CSS দিয়ে আপনি নিজে কাস্টম সাইজ সেট করতে পারেন:

<p style="font-size: 20px;">এটি কাস্টম ফন্ট সাইজ (২০px) এর টেক্সট।</p>
<p style="font-size: 1.5em;">এটি কাস্টম ফন্ট সাইজ (1.5em) এর টেক্সট।</p>

সারাংশ

বুটস্ট্রাপ ৫ এ Text Utilities এবং Font Size কাস্টমাইজেশন ব্যবহার করে আপনি সহজে আপনার ওয়েব পেজের টেক্সটের স্টাইল, সাইজ, এবং আঙ্গিক পরিবর্তন করতে পারেন। Text Utilities এর মাধ্যমে আপনি টেক্সটের অ্যালাইনমেন্ট, রঙ, এবং ট্রান্সফর্মেশন কাস্টমাইজ করতে পারবেন, আর Font Size কাস্টমাইজেশন এর মাধ্যমে আপনার কন্টেন্টের পাঠযোগ্যতা উন্নত করতে সক্ষম হবেন।

Content added By
Promotion